<!--
 * @Description  : 设置
 * @Author       : MengFan Shan
 * @Date         : 2023-02-23false
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage :right-icon="{ icon: '', size: 0, path: '' }" :left-icon="{ icon: 'pajamas:chevron-lg-left', size: 24, path: 'personal-center' }">
    <!-- 所有设置内容菜单 -->
    <div class="all">
      <router-link to="bind-mobile">
        <nut-cell :title="userStore.userInfo.phoneNumber ? '换绑手机号' : '绑定手机'" is-link></nut-cell>
      </router-link>
      <router-link to="settings-password">
        <nut-cell title="设置密码" is-link></nut-cell>
      </router-link>
      <nut-cell title="清空本地存储" is-link @click="baseClick"></nut-cell>
      <nut-cell title="客服" is-link></nut-cell>
      <nut-cell title="收货地址" is-link @click="showBasic = true"></nut-cell>
    </div>
    <!-- 收货地址弹出层 -->
    <nut-popup v-model:visible="showBasic" position="bottom" z-index="99" :style="{ height: '75%' }" flex flex-col>
      <div class="relative">
        <nut-address-list
          :data="addressData"
          :show-bottom-button="false"
          :data-options="dataOptions"
          class="addressList"
          relative
          mb-40
          @click-item="clickItem"
          @del-icon="delClick"
          @edit-icon="editClick"
        >
        </nut-address-list>
        <div fixed bottom-0 w-100vw flex content-center justify-center z-1 bg-white>
          <nut-button class="button-popup" color="#fcd006" @click="addAddressClicked">新增地址</nut-button>
        </div>
      </div>
    </nut-popup>
    <!-- 新增收货地址弹出层 -->
    <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '60%' }">
      <nut-form>
        <nut-form-item label="姓名">
          <nut-input v-model="basicData.name" class="nut-input-text" placeholder="收货人姓名" type="text" />
        </nut-form-item>
        <nut-form-item label="电话">
          <nut-input v-model="basicData.phoneNumber" class="nut-input-text" placeholder="收货人电话" type="text" />
        </nut-form-item>
        <nut-form-item label="地区">
          <div flex justify-between>
            <nut-input v-model="basicData.area" readonly placeholder="选择省/市/区" type="text" @click="addressModule.methods.show" />
            <nut-address
              v-model:visible="addressModule.state.show"
              :province="addressModule.areaInfo.province"
              :city="addressModule.areaInfo.city"
              :country="addressModule.areaInfo.country"
              :town="[]"
              custom-address-title="请选择所在地区"
              @change="addressModule.methods.onChange"
            ></nut-address>
            <TheIcon class="button-tu" icon="pajamas:chevron-right" :size="24" />
          </div>
        </nut-form-item>
        <nut-form-item label="详细地址">
          <nut-input v-model="basicData.detailedAddress" class="nut-input-text" placeholder="街道门牌/楼层房间号等信息" type="text" />
        </nut-form-item>
        <nut-form-item label="邮政编码">
          <nut-textarea v-model="basicData.postalCode" placeholder="邮政编码" type="text" />
        </nut-form-item>
        <div class="adress">
          <div>默认为收获地址</div>
          <n-space>
            <nut-switch v-model="defaultAddressActive" active-color="blue" @change="addressModule.methods.defaultAddressChang" />
          </n-space>
        </div>
      </nut-form>
      <div absolute bottom-0 w-100vw flex content-center justify-center>
        <nut-button class="button-popup" color="#fcd006" @click="saveAddress">保存</nut-button>
      </div>
    </nut-popup>
    <!-- 底部信息 -->
    <div class="footer">
      <!-- 退出登录 -->
      <div text-center>
        <nut-button class="button-item" color="#fcd006" @click="logout">退出登录</nut-button>
      </div>
      <!-- 网站信息 -->
      <div text-center>
        <div>
          <span>备案号：冀ICP备2023003814号-1</span>
        </div>
        <div>
          <span>秦公网安备 33010802011405号</span>
        </div>
        <div>电信增值业务经营许可证： 浙B2-20210476</div>
        <div>出版物经营许可证：浙杭西零字第22041</div>
      </div>
    </div>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import { province_list, city_list, county_list } from '@/store/modules/user/area.js'
import { isEmpty } from '~/src/utils/common'
import { addAddress, selAddress, updateAddress, deleteAddress } from '@/api/auth'

onMounted(() => {
  initializationAresDate()
  selectAddress()
})

// 初始化地区数据
let provinceList = []
let cityList = []
let countryList = []
const initializationAresDate = () => {
  // 省
  for (var key in province_list) {
    provinceList.push({ id: key, name: province_list[key] })
  }
  // 市
  for (var key in city_list) {
    cityList.push({ id: key, name: city_list[key] })
  }
  // 县、区
  for (var key in county_list) {
    countryList.push({ id: key, name: county_list[key] })
  }
}

// 全局用户信息
const userStore = useUserStore()
// 默认地址激活状态
const defaultAddressActive = ref(false)
// 一开始false，点击事件使showBasic变成true 把值赋值给visible 弹窗显示收货地址
const showBasic = ref(false)
// 一开始false，点击事件使showBottom变成true 把值赋值给visible 弹窗显示新增收货地址
const showBottom = ref(false)
// 基础信息
const basicData = reactive({
  // 地址ID
  id: '',
  // 默认地址开关
  defaultAddress: 0,
  // 姓名
  name: '',
  // 电话
  phoneNumber: '',
  // 地区
  area: '',
  // 详细地址
  detailedAddress: '',
  // 邮编
  postalCode: '',
  // 客户ID
  customerId: ''
})
// 筛选后的市级行政区域列表
const filterCityList = ref([])
// 筛选后的县、区行政区域列表
const filterCountryList = ref([])

const addressModule = reactive({
  // 区域选择状态信息
  state: {
    show: false
  },
  // 区域信息
  areaInfo: {
    // 省级行政区域列表
    province: provinceList,
    // 市级行政区域列表
    city: filterCityList,
    // 县、区行政区域列表
    country: filterCountryList,
    // 乡、镇行政区域列表
    town: [],
    // 选中的省级行政区域
    selectProvince: '',
    // 选中的市级行政区域
    selectCity: '',
    // 选中的乡、镇行政区域
    selectCountry: ''
  },
  // 区域选择相关方法
  methods: {
    // 显示与隐藏
    show() {
      addressModule.state.show = !addressModule.state.show
    },
    // 自定义选择地址时，选择地区时触发
    onChange({ custom, next, value }) {
      // 判断当前点击的行政区域
      if (custom === 'province') {
        // 省级行政区域，记录选择的省级行政区域
        addressModule.areaInfo.selectProvince = value.name
        // 置空筛选后的市级行政区域列表
        filterCityList.value = []
        // 取省级行政区域ID的前两位对市级行政区域进行筛选
        var cityIndex = value.id.substring(0, 2)
        cityList.forEach(item => {
          if (item.id.indexOf(cityIndex) === 0) {
            filterCityList.value.push(item)
          }
        })
        // 如果没有筛选出市级行政区域
        if (isEmpty(filterCityList.value)) {
          // 只以省级行政单位作为区域选择结果
          basicData.area = addressModule.areaInfo.selectProvince
          // 隐藏区域选择
          addressModule.state.show = false
          // 结束函数
          return
        }
      }
      // 判断当前点击的行政区域
      if (custom === 'city') {
        // 市级行政区域,记录选择的市级行政区域
        addressModule.areaInfo.selectCity = value.name
        // 置空筛选后的县、区行政区域列表
        filterCountryList.value = []
        // 取市级行政区域ID的前四位对县、区行政区域进行筛选
        var countryIndex = value.id.substring(0, 4)
        countryList.forEach(item => {
          if (item.id.indexOf(countryIndex) === 0) {
            filterCountryList.value.push(item)
          }
        })
        // 如果没有筛选出县、区级行政区域
        if (isEmpty(filterCountryList.value)) {
          // 只以省、市级行政单位作为区域选择结果
          basicData.area = addressModule.areaInfo.selectProvince + '/' + addressModule.areaInfo.selectCity
          // 隐藏区域选择
          addressModule.state.show = false
          // 结束函数
          return
        }
      }
      // 判断当前点击的行政区域
      if (custom === 'country') {
        // 县区行政区域，记录选择的县区行政区域
        addressModule.areaInfo.selectCountry = value.name
        // 以省、市、县区行政单位作为区域选择结果
        basicData.area = addressModule.areaInfo.selectProvince + '/' + addressModule.areaInfo.selectCity + '/' + addressModule.areaInfo.selectCountry
        // 三级地址选择，选择县区行政单位后隐藏区域选择
        addressModule.state.show = false
        // 结束函数
        return
      }
    },
    // 默认地址激活改变事件
    defaultAddressChang(value, boolean, event) {
      if (defaultAddressActive.value) {
        basicData.defaultAddress = 1
      } else {
        basicData.defaultAddress = 0
      }
    }
  }
})

// 新增地址点击事件
const addAddressClicked = () => {
  Object.keys(basicData).forEach(key => {
    basicData[key] = ''
  })
  defaultAddressActive.value = false
  showBottom.value = true
}

// 用户地址列表
const addressData = ref([])
// 映射地址列表
const dataOptions = reactive({
  addressDetail: 'detailedAddress',
  addressName: 'name',
  phone: 'phoneNumber'
})
// 查询用户地址
const selectAddress = async () => {
  const result = await selAddress(userStore.userId)
  addressData.value = result.data
}

// 编辑用户地址
const editClick = (event, item) => {
  // 遍历用户地址列表，找到要编辑的地址
  addressData.value.forEach(element => {
    if (element.id === item.id) {
      // 设置编辑地址信息
      basicData.id = element.id
      basicData.name = element.name
      basicData.phoneNumber = element.phoneNumber
      basicData.area = element.area
      basicData.detailedAddress = element.detailedAddress
      basicData.postalCode = element.postalCode
      basicData.defaultAddress = element.defaultAddress
      if (element.defaultAddress === 1) {
        defaultAddressActive.value = true
      } else {
        defaultAddressActive.value = false
      }
    }
  })
  // 显示新增地址弹层
  showBottom.value = true
}

// 删除用户地址
const delClick = (event, item) => {
  $dialog.confirm({
    title: '提示',
    type: 'info',
    content: '确认删除该地址？',
    confirm() {
      // 遍历用户地址列表，找到要删除的地址
      addressData.value.forEach(element => {
        if (element.id === item.id) {
          deleteAddressRequest(element)
        }
      })
    }
  })
}

// 发送删除地址请求
const deleteAddressRequest = async element => {
  const result = await deleteAddress(element)
  addressData.value = result.data
}

// 保存用户地址
const saveAddress = async () => {
  // 验证姓名
  if (isEmpty(basicData.name)) {
    $message.error('请输入姓名')
    return
  }
  // 验证电话
  if (isEmpty(basicData.phoneNumber)) {
    $message.error('请输入电话')
    return
  }
  // 验证地区
  if (isEmpty(basicData.area)) {
    $message.error('请选择地区')
    return
  }
  // 验证详细地址
  if (isEmpty(basicData.detailedAddress)) {
    $message.error('请输入详细地址')
    return
  }
  // 在数据中存储客户Id
  basicData.customerId = userStore.userId
  // 根据地址Id判断是新增用户地址还是修改用户地址
  if (isEmpty(basicData.id)) {
    // 请求新增地址
    const result = await addAddress(basicData)
    addressData.value = result.data
  } else {
    // 请求修改地址
    const result = await updateAddress(basicData)
    addressData.value = result.data
  }
  // 关闭新增地址弹层
  showBottom.value = false
}

// 清空缓存
const baseClick = () => {
  $dialog.confirm({
    title: '清空本地存储',
    type: 'info',
    content: '清空本地存储',
    confirm() {
      userStore.logout()
      $message.success('已清空')
    }
  })
}

// 退出登录
const logout = () => {
  $dialog.confirm({
    title: '提示',
    type: 'info',
    content: '确认退出？',
    confirm() {
      userStore.logout()
      $message.success('已退出登录')
    }
  })
}
</script>

<style scoped>
/* 退出登录按钮 */
.button-item {
  width: 240px;
  height: 50px;
  font-size: 18px;
  margin: 15px 0px 15px 0px;
  border-radius: 20px;
  border: none;
}
/* 新增地址、保存按钮 */
.button-popup {
  width: 80%;
  height: 40px;
  border: none;
}
/* 默认为收货地址 */
.adress {
  display: flex;
  justify-content: space-between;
  margin: 10px 25px 10px 15px;
}
</style>

<style>
/* 用于修改滑块的内部样式 */
.n-slider-rail__fill {
  background-color: #fcd006 !important;
}
.n-switch.n-switch--active .n-switch__rail {
  background-color: #fcd006 !important;
}
</style>
